<script setup>
import { ref, onMounted } from 'vue'
import LoginForm from './components/LoginForm.vue'
import Dashboard from './components/Dashboard.vue'
import ExifParser from './components/ExifParser.vue'
import LocationDetector from './components/LocationDetector.vue'
import ThemeToggle from './components/ThemeToggle.vue'
import InterestPreferences from './components/InterestPreferences.vue'
import EventShare from './components/EventShare.vue'

// 用户状态管理
const isLoggedIn = ref(false)
const username = ref('')

// 页面状态管理
const activeView = ref('login') // login, dashboard, exif, location, preferences, eventShare
const showThemePanel = ref(false)
const loginFormKey = ref(0)

const viewOptions = [
  { key: 'dashboard', label: '仪表盘' },
  { key: 'exif', label: 'EXIF解析' },
  { key: 'location', label: '位置检测' },
  { key: 'preferences', label: '兴趣设置' },
  { key: 'eventShare', label: '事件分享' }
]

// 主题相关状态
const currentTheme = ref('dark')
const themeMode = ref('auto')
const starDensity = ref(3)

// 页面切换
const switchView = (view) => {
  activeView.value = view
}

// 处理登录成功
const handleLoginSuccess = (loginData) => {
  isLoggedIn.value = true
  username.value = loginData.username || '天文爱好者'
  
  // 根据“记住我”选项决定是否持久化登录状态
  if (loginData.rememberMe) {
    localStorage.setItem('isLoggedIn', 'true')
    localStorage.setItem('username', username.value)
  } else {
    localStorage.removeItem('isLoggedIn')
    localStorage.removeItem('username')
  }
  
  // 跳转到仪表盘
  activeView.value = 'dashboard'
}

// 处理导航（从Dashboard组件）
const handleDashboardNavigate = (view) => {
  activeView.value = view
}

// 处理登出
const handleLogout = () => {
  isLoggedIn.value = false
  username.value = ''
  
  // 清除localStorage中的登录状态
  localStorage.removeItem('isLoggedIn')
  localStorage.removeItem('username')
  
  // 跳转到登录页面
  activeView.value = 'login'
  loginFormKey.value += 1
}

// 处理主题变化
const handleThemeChanged = (themeData) => {
  currentTheme.value = themeData.current
  themeMode.value = themeData.mode
  if (themeData.starDensity !== undefined) {
    starDensity.value = themeData.starDensity
  }
}

// 切换主题面板显示
const toggleThemePanel = () => {
  showThemePanel.value = !showThemePanel.value
}

// 初始化应用
onMounted(() => {
  // 应用初始主题
  document.documentElement.classList.add(`theme-${currentTheme.value}`)
  
  // 检查是否已登录
  const savedLoginStatus = localStorage.getItem('isLoggedIn')
  const savedUsername = localStorage.getItem('username')
  
  if (savedLoginStatus === 'true') {
    isLoggedIn.value = true
    username.value = savedUsername || '天文爱好者'
    activeView.value = 'dashboard'
  }
})
</script>

<template>
  <div class="app-container" :class="`theme-${currentTheme}`">
    <!-- 导航栏 -->
    <nav class="app-nav">
      <div class="nav-left">
        <h1 class="nav-logo">🌌 星空探索</h1>
        <p class="nav-subtitle">天文爱好者工具集</p>
      </div>
      
      <div class="nav-center">
        <template v-if="isLoggedIn">
          <button 
            class="nav-button" 
            :class="{ active: activeView === 'dashboard' }"
            @click="switchView('dashboard')"
          >
            仪表盘
          </button>
          <button 
            class="nav-button" 
            :class="{ active: activeView === 'exif' }"
            @click="switchView('exif')"
          >
            EXIF解析器
          </button>
          <button 
            class="nav-button" 
            :class="{ active: activeView === 'location' }"
            @click="switchView('location')"
          >
            位置检测
          </button>
          <button 
            class="nav-button" 
            :class="{ active: activeView === 'preferences' }"
            @click="switchView('preferences')"
          >
            兴趣设置
          </button>
          <button 
            class="nav-button" 
            :class="{ active: activeView === 'eventShare' }"
            @click="switchView('eventShare')"
          >
            事件分享
          </button>
        </template>
        <template v-else>
          <button 
            class="nav-button" 
            :class="{ active: activeView === 'login' }"
            @click="switchView('login')"
          >
            登录
          </button>
        </template>
      </div>
      
      <div class="nav-right">
        <template v-if="isLoggedIn">
          <div class="user-info">
            <span class="username">{{ username }}</span>
            <button class="logout-button" @click="handleLogout">
              退出
            </button>
          </div>
        </template>
        <button class="theme-toggle-button" @click="toggleThemePanel">
          <span v-if="currentTheme === 'dark'">🌙</span>
          <span v-else>☀️</span>
          <span class="toggle-text">主题</span>
        </button>
      </div>
    </nav>

    <!-- 主内容区 -->
    <main class="app-main" :class="{ 'app-main--login': activeView === 'login' }">
      <div v-if="isLoggedIn" class="view-switcher">
        <button
          v-for="option in viewOptions"
          :key="option.key"
          class="view-switcher__button"
          :class="{ active: activeView === option.key }"
          @click="switchView(option.key)"
        >
          {{ option.label }}
        </button>
      </div>
      <!-- 登录视图 -->
      <div v-if="activeView === 'login'" class="login-view">
        <LoginForm :key="loginFormKey" @login-success="handleLoginSuccess" />
      </div>
      
      <!-- 仪表盘视图 -->
      <div v-else-if="activeView === 'dashboard'" class="dashboard-view">
        <Dashboard 
          :username="username" 
          @navigate="handleDashboardNavigate"
          @logout="handleLogout"
        />
      </div>
      
      <!-- EXIF解析器视图 -->
      <div v-else-if="activeView === 'exif'" class="exif-view">
        <div class="view-header">
          <h2>🔭 天文摄影EXIF解析器</h2>
          <p>上传天文摄影图片，分析拍摄参数和设备信息</p>
        </div>
        <ExifParser />
      </div>
      
      <!-- 位置检测视图 -->
      <div v-else-if="activeView === 'location'" class="location-view">
        <div class="view-header">
          <h2>📍 天文观测位置检测</h2>
          <p>检测您的位置并计算最佳天文观测条件</p>
        </div>
        <LocationDetector />
      </div>
      
      <!-- 兴趣设置视图 -->
      <div v-else-if="activeView === 'preferences'" class="preferences-view">
        <div class="view-header">
          <h2>⚙️ 兴趣设置</h2>
          <p>自定义您的天文兴趣偏好</p>
        </div>
        <InterestPreferences />
      </div>
      
      <!-- 事件分享视图 -->
      <div v-else-if="activeView === 'eventShare'" class="eventShare-view">
        <div class="view-header">
          <h2>📤 事件分享</h2>
          <p>分享和发现天文观测事件</p>
        </div>
        <EventShare />
      </div>
    </main>

    <!-- 主题设置面板 -->
    <div class="theme-panel-overlay" v-if="showThemePanel" @click="toggleThemePanel">
      <div class="theme-panel" @click.stop>
        <div class="panel-header">
          <h3>主题设置</h3>
          <button class="close-button" @click="toggleThemePanel">✕</button>
        </div>
        <ThemeToggle @theme-changed="handleThemeChanged" />
      </div>
    </div>

    <!-- 页脚 -->
    <footer class="app-footer">
      <div class="footer-content">
        <p>© 2024 星空探索应用 - 天文爱好者的必备工具</p>
        <div class="footer-links">
          <a href="#" class="footer-link">关于我们</a>
          <a href="#" class="footer-link">使用指南</a>
          <a href="#" class="footer-link">隐私政策</a>
        </div>
      </div>
    </footer>
  </div>
</template>

<style>
/* 全局CSS变量 */
:root {
  --bg-primary: #050518;
  --bg-secondary: #0a0a2a;
  --bg-card: rgba(10, 10, 42, 0.85);
  --text-primary: #ffffff;
  --text-secondary: rgba(255, 255, 255, 0.6);
  --border-color: rgba(85, 136, 255, 0.2);
  --shadow-color: rgba(0, 0, 0, 0.5);
  --accent-color: #5588ff;
  --success-color: #4caf50;
  --warning-color: #ff9800;
  --error-color: #f44336;
  --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* 浅色主题变量 */
.theme-light {
  --bg-primary: #f0f2f5;
  --bg-secondary: #ffffff;
  --bg-card: rgba(255, 255, 255, 0.95);
  --text-primary: #1a1a2e;
  --text-secondary: rgba(26, 26, 46, 0.6);
  --border-color: rgba(85, 136, 255, 0.3);
  --shadow-color: rgba(0, 0, 0, 0.1);
}

/* 深色主题变量 */
.theme-dark {
  --bg-primary: #050518;
  --bg-secondary: #0a0a2a;
  --bg-card: rgba(10, 10, 42, 0.85);
  --text-primary: #ffffff;
  --text-secondary: rgba(255, 255, 255, 0.6);
  --border-color: rgba(85, 136, 255, 0.2);
  --shadow-color: rgba(0, 0, 0, 0.5);
}

/* 全局重置和基础样式 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: var(--font-family);
  background: var(--bg-primary);
  color: var(--text-primary);
  line-height: 1.6;
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* 应用容器 */
.app-container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}

/* 导航栏 */
.app-nav {
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border-color);
  padding: 1rem 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 1000;
  backdrop-filter: blur(10px);
}

.nav-left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.nav-logo {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}

.nav-subtitle {
  font-size: 0.875rem;
  color: var(--text-secondary);
  margin: 0;
}

.nav-center {
  display: flex;
  gap: 1rem;
}

.nav-button {
  padding: 0.75rem 1.5rem;
  background: transparent;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  color: var(--text-primary);
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 0.875rem;
  font-weight: 500;
}

.nav-button:hover {
  border-color: var(--accent-color);
  background: rgba(85, 136, 255, 0.1);
  transform: translateY(-1px);
}

.nav-button.active {
  background: var(--accent-color);
  border-color: var(--accent-color);
  color: #fff;
}

.nav-right {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 1rem;
  background: rgba(85, 136, 255, 0.1);
  border-radius: 8px;
  border: 1px solid rgba(85, 136, 255, 0.2);
}

.username {
  font-weight: 500;
  color: var(--text-primary);
}

.logout-button {
  padding: 0.5rem 0.75rem;
  background: transparent;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 0.875rem;
}

.logout-button:hover {
  border-color: var(--error-color);
  color: var(--error-color);
}

.theme-toggle-button {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.25rem;
  background: transparent;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  color: var(--text-primary);
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 1rem;
}

.theme-toggle-button:hover {
  border-color: var(--accent-color);
  background: rgba(85, 136, 255, 0.1);
}

.toggle-text {
  font-size: 0.875rem;
  font-weight: 500;
}

.app-main--login {
  max-width: none;
  padding: 0;
  width: 100vw;
  margin-left: calc(50% - 50vw);
}

.login-view {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - 4rem);
  position: relative;
  overflow: visible;
  padding: 0;
  margin: 0 auto;
  width: 100vw;
}

.view-switcher {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
  padding: 0 2rem;
}

.view-switcher__button {
  padding: 0.5rem 1.5rem;
  border-radius: 999px;
  border: 1px solid var(--border-color);
  background: transparent;
  color: var(--text-primary);
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 0.875rem;
}

.view-switcher__button:hover {
  border-color: var(--accent-color);
  color: var(--accent-color);
  transform: translateY(-1px);
}

.view-switcher__button.active {
  background: var(--accent-color);
  color: #fff;
  border-color: var(--accent-color);
  box-shadow: 0 0 18px rgba(85, 136, 255, 0.35);
}

.theme-panel {
  background: var(--bg-card);
  border-radius: 16px;
  border: 1px solid var(--border-color);
  box-shadow: 0 20px 60px var(--shadow-color);
  max-width: 500px;
  width: 90%;
  max-height: 80vh;
  overflow-y: auto;
  animation: slideUp 0.3s ease;
}

.panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid var(--border-color);
}

.panel-header h3 {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--text-primary);
}

.close-button {
  background: none;
  border: none;
  font-size: 1.5rem;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.2s ease;
}

.close-button:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--text-primary);
}

/* 页脚 */
.app-footer {
  background: var(--bg-secondary);
  border-top: 1px solid var(--border-color);
  padding: 1.5rem 2rem;
  margin-top: auto;
}

.footer-content {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.footer-content p {
  color: var(--text-secondary);
  font-size: 0.875rem;
  margin: 0;
}

.footer-links {
  display: flex;
  gap: 1.5rem;
}

.footer-link {
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 0.875rem;
  transition: color 0.3s ease;
}

.footer-link:hover {
  color: var(--accent-color);
}

/* 动画 */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes slideUp {
  from {
    transform: translateY(30px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* 响应式设计 */
@media (max-width: 768px) {
  .app-nav {
    flex-direction: column;
    gap: 1rem;
    padding: 1rem;
  }
  
  .nav-left {
    align-items: center;
  }
  
  .nav-center {
    flex-wrap: wrap;
    justify-content: center;
  }
  
  .nav-button {
    padding: 0.625rem 1rem;
    font-size: 0.8125rem;
  }
  
  .app-main {
    padding: 1rem;
  }
  
  .view-header h2 {
    font-size: 1.5rem;
  }
  
  .theme-panel {
    width: 95%;
    max-height: 90vh;
  }
  
  .footer-links {
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
  }
}

@media (max-width: 480px) {
  .app-nav {
    padding: 0.75rem 0.5rem;
  }
  
  .nav-logo {
    font-size: 1.25rem;
  }
  
  .nav-button {
    padding: 0.5rem 0.75rem;
    font-size: 0.75rem;
  }
  
  .app-main {
    padding: 0.75rem;
  }
  
  .theme-toggle-button {
    padding: 0.625rem 1rem;
  }
  
  .toggle-text {
    display: none;
  }
}
</style>